<!-- playground-fold -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="./main.css">
	<title>Sample</title>
</head>

<body style="background-color: var(--sapBackgroundColor); height: fit-content;">
	<!-- playground-fold-end -->
	<ui5-card>
		<ui5-card-header slot="header" title-text="Michael Adams" subtitle-text="Senior Sales Executive">
			<img src="https://ui5.github.io/webcomponents/images/avatars/man_avatar_1.png" slot="avatar" alt="avatar">
		</ui5-card-header>
		<section class="quickPromptSection">
			<ui5-label required>To: </ui5-label>
			<div style="display: flex; gap: 0.125rem;">
				<ui5-token selected text="Diana Mihaylova" style="width: fit-content; margin-block-end: 1rem;"></ui5-token>
				<ui5-token selected text="DL Marketing Sector SAP" style="width: fit-content; margin-block-end: 1rem;"></ui5-token>
			</div>
			<div class="quickPromptLblBtn">
				<ui5-label style="align-self: flex-end;" required>Offer: </ui5-label>
				<ui5-ai-button id="quickPromptAiButton" class="quickPromptAiButton" state="generate">
					<ui5-ai-button-state name="generate" text="Generate" icon="ai"></ui5-ai-button-state>
					<ui5-ai-button-state name="generating" text="Stop Generating" icon="stop"></ui5-ai-button-state>
					<ui5-ai-button-state name="reviseGenerating" text="Stop Generating" icon="stop"></ui5-ai-button-state>
					<ui5-ai-button-state name="revise" text="Revise" icon="ai" end-icon="navigation-down-arrow"></ui5-ai-button-state>
				</ui5-ai-button>
			</div>
				<ui5-busy-indicator class="quickPromptBusyIndicator" id="quickPromptBusyIndicator">
				<ui5-textarea id="output" style="height: 100%;"></ui5-textarea>

		</section>
		<div class="quickPromptCardFooter">
			<ui5-button id="footerBtnSend" design="Emphasized">Send</ui5-button>
			<ui5-button id="footerBtnCancel" design="Transparent">Cancel</ui5-button>
		</div>
		<ui5-toast placement="MiddleCenter" id="quickPromptToast" duration="3000">Your message was sent successfully!</ui5-toast>
	</ui5-card>

	<ui5-menu id="menu1" horizontal-align="End">
		<ui5-menu-item text="Regenerate"></ui5-menu-item>
		<ui5-menu-separator></ui5-menu-separator>
		<ui5-menu-item text="Fix Spelling and Grammar"></ui5-menu-item>
		<ui5-menu-item text="Rewrite Text">
			<ui5-menu-item text="Simplify"></ui5-menu-item>
			<ui5-menu-item text="Expand"></ui5-menu-item>
			<ui5-menu-item text="Rephrase"></ui5-menu-item>
			<ui5-menu-item text="Summarize"></ui5-menu-item>
		</ui5-menu-item>
		<ui5-menu-item text="Make Bulleted List"></ui5-menu-item>
		<ui5-menu-item text="Translate">
			<ui5-menu-item text="Bulgarian"></ui5-menu-item>
			<ui5-menu-item text="English"></ui5-menu-item>
			<ui5-menu-item text="German"></ui5-menu-item>
		</ui5-menu-item>
		<ui5-menu-separator></ui5-menu-separator>
		<ui5-menu-item text="Generate Error"></ui5-menu-item>
		<ui5-menu-item text="Clear Error"></ui5-menu-item>
	</ui5-menu>

	<!-- playground-fold -->
	<script type="module" src="main.js"></script>
</body>

</html>
<!-- playground-fold-end -->